<template>
	<div class="points-container">
		<el-card class="point-card">
			<div class="points-tab">
				<span>您共有</span>
				<el-text type="danger" size="large" class="point-num">{{userPoints}}</el-text>
				<span>积分</span>
			</div>
			<el-button class="exchange-btn" type="primary" round @click="exchangeGift">兑换奖品</el-button>
			<el-link class="back-icon" type="info" @click="clickBack"><el-icon><Back /></el-icon>返回</el-link>
		</el-card>
		<el-card class="history-card" v-if="totalActive.length > 0">
			<div class="step-div">
				<el-steps direction="vertical" finish-status="success">
					<el-step v-for="(active,index) in totalActive" :key="active.id" :title="active.activeName"
						:icon="Location" :status="isComplete(active.id)?stepState(active.id):'wait'">
						<template #description>
							<span v-html="formatDescription(makeDescription(active.id))"></span>
						</template>
					</el-step>
				</el-steps>
			</div>
		</el-card>
	</div>
</template>

<script setup>
	import {
		reactive,
		ref,
		computed,
		inject
	} from 'vue';
	import {
		Location
	} from '@element-plus/icons-vue'
	import apiClient from '../api/index.js';
	import {
		ElMessage
	} from 'element-plus';
	import { useRouter } from 'vue-router';
	const userPoints = ref(0);
	const totalActive = ref([]);
	const historyActive = ref([]);
	const globalLoading = inject('globalLoading');
	const {
		setLoading
	} = globalLoading;
	const router = useRouter();
	setLoading(true);
	apiClient.getActiveList().then(res => {
		if (res.data.meta.code == 200) {
			totalActive.value = res.data.data.activeList;
			historyActive.value = res.data.data.historyList;
			userPoints.value = res.data.data.userPoints.integral;
		}

		setLoading(false);
	}).catch(err => {
		console.log(err);
	});

	const makeDescription = computed(() => (id) => {
		if (isComplete(id)) {
			const item = historyActive.value.find(item => item.active_id === id);
			if (item.state === 1) {
				return `已参与，答案全部正确+1积分\n${item.complete_time}`;
			} else {
				return `已参与，未全部答对，无积分\n${item.complete_time}`;
			}
		}
		return '未参与';
	});

	// 格式化描述字符串，替换换行符为 <br> 标签
	const formatDescription = (description) => {
		return description.replace(/\n/g, '<br>');
	};

	const isComplete = function(id) {
		return historyActive.value.some((item) => {
			return item.active_id === id;
		});
	};

	const stepState = function(id) {
		if (isComplete(id)) {
			const item = historyActive.value.find(item => item.active_id === id);
			if (item.state === 1) {
				return `success`;
			} else {
				return `finish`;
			}
		}
	};

	const exchangeGift = function() {
		//调用兑换奖品的接口
		apiClient.getExchange().then(res => {
			var msgType = '';
			if(res.data.meta.code == 200){
				msgType = 'success';
			}
			else
			{
				msgType = 'error';
			}
			ElMessage({
				message: res.data.meta.msg,
				type: msgType,
			});
		}).catch(err => {
			console.log(err);
			ElMessage({
				message: res.data,
				type: 'error',
			});
		});
	}

	function clickBack(){
		router.back();
	}
</script>

<style scoped lang="scss">
	.points-container {
		max-width: 600px;
		margin: 1rem auto;
		padding: 1.5rem;

		.point-card {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 2rem;

			.points-tab {
				text-align: center;
				font-size: 20px;

				.point-num {
					font-size: 40px;
				}
			}

			.exchange-btn {
				width: 100%;
				margin-top: 10px;
			}

			.back-icon{
				margin-top: 5px;
				width: 100%;
			}
		}

		.history-card {
			height: 100%;

			.step-div {}
		}
	}
</style>